<template>
  <div class="a">
    <div class="cptj">
      <p>待发布产品条件</p>
      <div class="yjlx">
        <span>预警类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="cpzt">
        <span>产品状态</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button type="small">预警查询</el-button>
    </div>
    <div class="yjxx">
      <p>预警信息</p>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="预警编号"> </el-table-column>
          <el-table-column prop="name" label="时间"> </el-table-column>
          <el-table-column prop="address" label="时次"> </el-table-column>
          <el-table-column prop="address" label="类型"> </el-table-column>
          <el-table-column prop="address" label="审核状态"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="yjxq">
      <p>预警详情</p>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="县市"> </el-table-column>
          <el-table-column prop="name" label="乡镇"> </el-table-column>
          <el-table-column prop="address" label="预警区域"> </el-table-column>
          <el-table-column prop="address" label="预警等级"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="shyj">
      <p>审核意见</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="bottom">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="制作" name="first">
          <div class="zz">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="图例" disabled></el-checkbox>
              <el-checkbox label="附图" disabled></el-checkbox>
              <el-checkbox label="透明" disabled></el-checkbox>
            </el-checkbox-group>
            <div class="btn">
              <div>产品制作</div>
              <div>预警发布</div>
              <div>模板管理</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分析" name="second">
          <div class="fx">
            <div class="xztc">
              <span>选择图层</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btn">分析影响目标</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  .cptj {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 10px 10px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    p {
      margin-bottom: 10px;
    }
    .yjlx,
    .cpzt {
      margin: 10px auto;
      span {
        margin-right: 10px;
      }
    }
  }
  .yjxx,
  .yjxq {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
  }
  p {
    margin: 10px;
  }
  .shyj {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    padding-bottom: 5px;
  }
  .bottom {
    width: 100%;
    .zz {
      .el-checkbox-group {
        width: 100%;
      }
      .btn {
        display: flex;
        margin-top: 5px;
        div {
          width: 100px;
          height: 20px;
          border: 1px solid #dedede;
          text-align: center;
          line-height: 20px;
          margin: 5px;
        }
      }
    }
    .fx {
      .xztc {
        span {
          margin-right: 10px;
        }
        .el-select {
          width: 100px;
        }
      }
      .btn {
        margin: 10px;
        width: 100px;
        height: 20px;
        border: 1px solid #dedede;
        text-align: center;
        line-height: 20px;
      }
    }
  }
}
</style>
